<template>
  <BFGridApp :schema="schema" :routes="[]" :views="[]" :services="services" />
</template>
<script lang="ts">
import Vue, { defineComponent, inject, provide, Ref } from 'vue'
import { BFGridApp } from './schema-app'
import { computed } from '@formily/vxe-table/src/__builtins__'
const schema = {
  type: 'object',
  properties: {
    gridapp: {
      type: 'array',
      'x-decorator': 'FormItem',
      'x-component': 'ArrayTable',
      'x-pattern': 'readPretty',
      'x-component-props': {
        align: 'center',
        columnConfig: {
          isCurrent: true,
          isHover: true,
          resizeable: true,
        },
        rowConfig: {
          isCurrent: true,
          isHover: true,
          resizeable: true,
        },
        pagerConfig: {
          autoHidden: true,
          enable: true,
        },
      },
      items: {
        type: 'object',
        properties: {
          colIndex: {
            title: '序号',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'seq',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colradio: {
            title: '单选',
            type: 'void',
            'x-display': 'none',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'radio',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colCheckbox: {
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'checkbox',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colgroupBasic: {
            type: 'void',
            title: '基础信息',
            'x-component': 'ArrayTable.Colgroup',
            'x-component-props': {},
            properties: {
              colgroupBasicGroup: {
                type: 'void',
                title: '基础信息分组',
                'x-component': 'ArrayTable.Colgroup',
                properties: {
                  xxxxx1: {
                    title: '名称',
                    type: 'void',
                    'x-component': 'ArrayTable.Column',
                    'x-component-props': {
                      sortable: true,
                      width: 200,
                      resizable: true,
                    },
                    properties: {
                      name: {
                        type: 'string',
                        'x-component': 'Input',
                      },
                    },
                  },
                },
              },
              xxxxx2: {
                title: '外号',
                type: 'void',
                'x-component': 'ArrayTable.Column',
                'x-component-props': { width: 200, resizable: true },
                properties: {
                  nickname: {
                    type: 'string',
                    'x-component': 'Input',
                  },
                },
              },
            },
          },
          colRole: {
            title: '角色',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              resizable: true,
            },
            properties: {
              role: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
          colAge: {
            title: '年龄',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              resizable: true,
            },
            properties: {
              age: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
        },
      },
      properties: {
        toolbar: {
          type: 'void',
          'x-component': 'ArrayTable.Toolbar',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                button1: {
                  type: 'void',
                  'x-decorator': 'BFGridApp.Link',
                  'x-decorator-props': {
                    linkTo: '/create',
                  },
                  'x-component': 'button',
                  'x-content': '新增',
                  'x-reactions': [
                    {
                      fulfill: {
                        state: {
                          visible: '{{$route.query.dev != 1}}',
                        },
                      },
                    },
                  ],
                },
                // button2: {
                //   type: 'void',
                //   'x-decorator': 'BFGridApp.Action',
                //   'x-decorator-props': {
                //     service: 'actions',
                //     name: 'handleRefresh',
                //   },
                //   'x-component': 'button',
                //   'x-content': '刷新',
                // },
                button3: {
                  type: 'void',
                  'x-decorator': 'BFGridApp.Action',
                  'x-decorator-props': {
                    service: 'actions',
                    name: 'handleExport',
                  },
                  'x-component': 'button',
                  'x-content': '导出',
                },
                button4: {
                  type: 'void',
                  'x-decorator': 'BFGridApp.Action',
                  'x-decorator-props': {
                    service: 'actions',
                    name: 'handleImport',
                  },
                  'x-component': 'button',
                  'x-content': '导入',
                },
              },
            },
          },
        },
        Form: {
          type: 'void',
          'x-component': 'ArrayTable.Form',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                Input1: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入1',
                  },
                },
                Input2: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入2',
                  },
                },
                Input3: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入3',
                  },
                },
                Input4: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入4',
                  },
                },
              },
            },
          },
        },
      },
    },
  },
}

import DomainModel from './biz'
import { useDomainModelProvider } from './schema-app'

export default defineComponent({
  components: { BFGridApp },
  setup() {
    useDomainModelProvider(DomainModel)
    return {
      schema,
      services: [
        {
          name: 'actions',
          type: 'mutation',
          resolver: (params, model, action) => {
            console.log(action, model, params)
            model?.[action.name]()
          },
        },
      ],
    }
  },
})
</script>
